<!-- Graficas -->
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/amcharts.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/serial.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/pie.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/amstock.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/themes/dark.js"></script>

<style type="text/css">
    #chartdivexame {
        background:#343434;
        color:#ffffff;
        width: 100%;
        height: 500px;
        font-size: 11px;
    }
    #chart-multiple{
        width	: 100%;
        height	: 500px;
    }
</style>
<script type="text/javascript">
    var chart = AmCharts.makeChart("chartdivexame", {
        "theme": "dark",
        "type": "serial",
        "dataProvider": [
<?php foreach ($graphComp as $v) { ?>
                {
                    "empresa": "<?= $v->e_nombre ?>",
                    "extot": <?= $v->totalTest ?>,
                    "exreal": <?= $v->nTestDone ?>
                },
<?php } ?>
        ],
        "valueAxes": [{
                "unit": "",
                "position": "left",
                "title": "Numero de examenes",
            }],
        "startDuration": 1,
        "graphs": [{
                "balloonText": "Numero de examens totales [[category]]: <b>[[value]]</b>",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "title": "2004",
                "type": "column",
                "valueField": "extot"
            }, {
                "balloonText": "Numero de examens realizados [[category]]: <b>[[value]]</b>",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "title": "2005",
                "type": "column",
                "clustered": false,
                "columnWidth": 0.5,
                "valueField": "exreal"
            }],
        "plotAreaFillAlphas": 0.1,
        "categoryField": "empresa",
        "categoryAxis": {
            "gridPosition": "start"
        }
    });
</script>

<script>
    var chartData1 = [<?= $empresa['emp_1'] ?>];
    var chartData2 = [<?= $empresa['emp_2'] ?>];
    var chartData3 = [<?= $empresa['emp_3'] ?>];
    var chartData4 = [<?= $empresa['emp_4'] ?>];
    var chartData5 = [<?= $empresa['emp_5'] ?>];
    var chartData6 = [<?= $empresa['emp_6'] ?>];


    var chart = AmCharts.makeChart("chart-multiple", {
        type: "stock",
        "theme": "none",
        pathToImages: "http://www.amcharts.com/lib/3/images/",
        dataSets: [{
                title: "Brother",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData1,
                categoryField: "date"
            },
            {
                title: "Empresa_2",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData2,
                categoryField: "date"
            },
            {
                title: "Empresa_3",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData3,
                categoryField: "date"
            },
            {
                title: "Empresita Quac!",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData4,
                categoryField: "date"
            },
            {
                title: "Novalimentos",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData5,
                categoryField: "date"
            },
            {
                title: "Empresas Smart SCreen",
                fieldMappings: [{
                        fromField: "value",
                        toField: "value"
                    }, {
                        fromField: "volume",
                        toField: "volume"
                    }],
                dataProvider: chartData6,
                categoryField: "date"
            }
        ],
        panels: [{
                showCategoryAxis: false,
                title: "Value",
                percentHeight: 70,
                stockGraphs: [{
                        id: "g1",
                        valueField: "value",
                        comparable: true,
                        compareField: "value",
                        balloonText: "[[title]]:<b>[[value]]</b>",
                        compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
                    }],
                stockLegend: {
                    periodValueTextComparing: "[[percents.value.close]]%",
                    periodValueTextRegular: "[[value.close]]"
                }
            },
            {
                title: "Volume",
                percentHeight: 30,
                stockGraphs: [{
                        valueField: "volume",
                        type: "column",
                        showBalloon: false,
                        fillAlphas: 1
                    }],
                stockLegend: {
                    periodValueTextRegular: "[[value.close]]"
                }
            }
        ],
        chartScrollbarSettings: {
            graph: "g1"
        },
        chartCursorSettings: {
            valueBalloonsEnabled: true,
            fullWidth: true,
            cursorAlpha: 0.1,
            valueLineBalloonEnabled: true,
            valueLineEnabled: true,
            valueLineAlpha: 0.5
        },
        periodSelector: {
            position: "left",
            periods: [{
                    period: "MM",
                    selected: true,
                    count: 1,
                    label: "1 month"
                }, {
                    period: "YYYY",
                    count: 1,
                    label: "1 year"
                }, {
                    period: "YTD",
                    label: "YTD"
                }, {
                    period: "MAX",
                    label: "MAX"
                }]
        },
        dataSetSelector: {
            position: "left"
        }
    });
</script>

<!-- /Graficas -->
<!-- Content -->
<div id="content">
    <!-- Content wrapper -->
    <div class="wrapper">
        <h5 class="widget-name"><i class="icon-columns"></i>KPI</h5>
        <h2>Gráfica de Comparación</h2>
        <div id="chartdivexame"></div>
        <div id="chart-multiple"></div>
    </div>
    <!-- /Content wrapper -->
</div>
<!-- /Content -->
